<!-- pages/index/index.vue -->
<template>
    <view class="container">
        <view class="header">
            <text class="title">我的骰子</text>
            <button @click="navigateToEdit(-1)" size="mini" type="primary">新增</button>
        </view>

        <view class="dice-list">
            <view 
                v-for="(dice, index) in dices" 
                :key="index" 
                class="dice-item"
                @click="navigateToRoll(index)"
            >
                <text class="dice-name">{{ dice.name }}</text>
                <text class="dice-info">{{ dice.faces.length }}面骰子</text>
                <view class="actions">
                    <button @click.stop="navigateToEdit(index)" size="mini">编辑</button>
                    <button @click.stop="deleteDice(index)" size="mini" type="warn">删除</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useDiceStore } from '@/store' // 根据实际路径调整

const diceStore = useDiceStore()
// 为了保持响应式，请通过 storeToRefs 解构 state
const { dices } = storeToRefs(diceStore)
const { loadDices, deleteDice } = diceStore

function navigateToEdit(index) {
    uni.navigateTo({
        url: `/pages/editDice/editDice?index=${index}`
    })
}

function navigateToRoll(index) {
    uni.navigateTo({
        url: `/pages/rollDice/rollDice?index=${index}`
    })
}

onMounted(() => {
    loadDices()
})
</script>

<style>
.container {
    padding: 20px;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.title {
    font-size: 24px;
    font-weight: bold;
}
.dice-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.dice-item {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dice-name {
    font-size: 18px;
    font-weight: bold;
}
.dice-info {
    font-size: 14px;
    color: #666;
}
.actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
</style>